/**
 *  message用于向用户显示消息，可参考gmail的黄色消息框。
 *  message在每次显示消息后默认延迟8s后隐藏消息，或者也可以主动隐藏
 *  相关action有 sendMessage, hideBox
 */

import React from 'react';
import { is } from 'immutable';
import { connect } from 'react-redux';
import * as action from '../../redux/action';
import * as css from './style';

class Message extends React.Component {

    constructor(props) {
        super(props);
        this.hide = this.hide.bind(this);
    }

    shouldComponentUpdate(nextProps) {
        return !is(nextProps.MESSAGE, this.props.MESSAGE);
    }

    // 组件更新后取消原有的延迟隐藏，如果当前的action不是 HIDE_BOX，
    // 则创建一个新的延迟隐藏。
    componentDidUpdate() {
        clearTimeout(this.delay);

        let MESSAGE = this.props.MESSAGE.toJS();

        if (MESSAGE.action !== 'HIDE_BOX') {
            this.delay = setTimeout(function() {
                this.hide.call(this);
            }.bind(this), 8000);
        }
    }

    // 隐藏messags box.
    hide(e) {
        e && e.preventDefault();
        this.props.hideBox();
        clearTimeout(this.delay);
    }

    render() {
        let MESSAGE = this.props.MESSAGE.toJS();
        return (
            <div className={css.panel} data-isshow={ MESSAGE.isShow }
                onClick={ this.hide }
                onTouchStart={ this.hide }>
                <span className={ css.book }>
                    { MESSAGE.text }
                </span>
            </div>
        )
    }
}

export default connect(state => ({ MESSAGE: state.MESSAGE }), action)(Message);
